<template>
  <div id="tablebox">
    <div>
      <el-col :span="24" class="breadcrumb-container input-val-box">
        <div class="input-top">
          <el-select v-model="value_tool" placeholder="请选择教辅具">
            <el-option
                    v-for="item in options_tool"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="input-top">
          <el-date-picker
                  v-model="value_creat"
                  type="date"
                  placeholder="创建时间">
          </el-date-picker>
        </div>
        <div class="input-top">
          <el-date-picker
                  v-model="value_brow"
                  type="date"
                  placeholder="借出时间">
          </el-date-picker>
        </div>
        <div class="input-top">
          <el-date-picker
                  v-model="value_browOut"
                  type="date"
                  placeholder="转借时间">
          </el-date-picker>
        </div>
        <div class="input-top">
          <el-date-picker
                  v-model="value_browback"
                  type="date"
                  placeholder="归还时间">
          </el-date-picker>
        </div>
        <el-button type="primary"><i class="el-icon-search"></i>搜索</el-button>
      </el-col>
      <el-col :span="24" class="breadcrumb-container button-line">
        <el-button type="primary">添加</el-button>
        <el-button type="warning">禁用</el-button>
        <el-button type="success">恢复</el-button>
        <el-button type="danger">删除</el-button>
        <el-button type="primary">回收站</el-button>
      </el-col>
    </div>
    <!--列表-->
    <el-table
            ref="multipleTable"
            :data="tableData3"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
      <el-table-column
              type="selection"
              width="50">
      </el-table-column>
      <el-table-column
              label="时间"
              width="100">
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column>
      <el-table-column
              prop="name"
              label="姓名"
              width="200">
      </el-table-column>
      <el-table-column
              prop="number"
              label="库存"
              show-overflow-tooltip>
      </el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button size="small" @click="handleEdit()">编辑</el-button>
          <el-button type="danger" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-pagination
              background
              layout="prev, pager, next"
              :total="1000">
      </el-pagination>
    </el-col>
    <!--编辑界面-->
    <el-dialog title="编辑" :visible.sync="editFormVisible" :close-on-click-modal="false">
      <el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="editForm.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="editForm.sex">
            <el-radio class="radio" :label="1">男</el-radio>
            <el-radio class="radio" :label="0">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input-number v-model="editForm.age" :min="0" :max="200"></el-input-number>
        </el-form-item>
        <el-form-item label="生日">
          <el-date-picker type="date" placeholder="选择日期" v-model="editForm.birth"></el-date-picker>
        </el-form-item>
        <el-form-item label="地址">
          <el-input type="textarea" v-model="editForm.addr"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="editFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        options_tool: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value_tool: '', // 请选择教辅具
        value_creat: '', // 创建时间
        value_brow: '', // 借出时间
        value_browOut: '', // 转借时间
        value_browback: '', // 归还时间
        tableData3: [{
          line: '1',
          date: '2016-05-03',
          name: '十万个为什么',
          number: '12',
          status: '借出'
        }, {
          line: '1',
          date: '2016-05-03',
          name: '十万个为什么',
          number: '12',
          status: '借出'
        }, {
          line: '1',
          date: '2016-05-03',
          name: '十万个为什么',
          number: '12',
          status: '借出'
        }, {
          line: '1',
          date: '2016-05-03',
          name: '十万个为什么',
          number: '12',
          status: '借出'
        }],
        multipleSelection: [],
        // 编辑界面数据
        editLoading: false,
        editFormRules: {
          name: [
            { required: true, message: '请输入姓名', trigger: 'blur' }
          ]
        },
        editForm: {
          id: 1,
          name: '测试',
          sex: 1,
          age: 10,
          birth: '2018-08-05',
          addr: '长安大厦'
        },
        addFormRules: {
          name: [
            { required: true, message: '请输入姓名', trigger: 'blur' }
          ]
        },
        addLoading: false,
        editFormVisible: false // 编辑界面是否显示
      }
    },
    methods: {
      handleSelectionChange (val) {
        this.multipleSelection = val
      },
      // 批量删除
      batchRemove () {
        console.log('批量删除数据')
      },
      // 编辑
      handleEdit () {
        console.log('编辑数据g')
        console.log('编辑数据g')
        this.editFormVisible = true
      },
      editSubmit () {
        console.log('提交数据')
      }
    },
    mounted () {
    }
  }
</script>

<style lang="scss">
  .toolbar{
    padding:30px 0;
    text-align: center;
  }
</style>
